<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品价格</title>
	</head>
	<body>
		<table id="mytable" border="1"></table>
		<script>
			let table=document.getElementById("mytable");
			let thead=document.createElement("thead");
			table.appendChild(thead);
			let tr=document.createElement("tr");
			thead.appendChild(tr);
			let th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Product";
			th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Price";
			th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Rating";
			let tbody=document.createElement("tbody");
			table.appendChild(tbody);
			
			let arrProducts=["Vitae Quam Lorem","In Tempus Velit ","Lorem Ipsum Dolor Sat","Quis Felis Fringilla","Nunc Sem Pharetra"];
			let arrPrices=["$5","$44","$55","$66","$23"];
			let arrRating=["⭐⭐⭐⭐","⭐⭐","⭐","⭐⭐⭐⭐","⭐⭐⭐⭐⭐⭐"];
			let len=arrProducts.length;
			for (let i=0;i<len;i++) {
				tr=document.createElement("tr");
				tbody.appendChild(tr);
				let td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrProducts[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrPrices[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrRating[i];
				
			}
		</script>
	</body>
</html>
